<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title data-i18n="app_name">ScrcpyKeyMapper</title>
    <link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.0.0/css/flag-icons.min.css" rel="stylesheet">
    <link href="css/styles.css" rel="stylesheet">
</head>
<body>
    <div class="wrapper">
        <div class="container-fluid">
            <nav class="navbar navbar-expand-lg border-bottom">
                <div class="container-fluid">
                    <span class="navbar-brand">
                        <i class="bi bi-keyboard me-2" aria-hidden="true"></i>
                        <span data-i18n="app_name">ScrcpyKeyMapper</span>
                        <small class="text-muted ms-2" data-i18n="qtscrcpy">(QtScrcpy)</small>
                    </span>
                </div>
                <div id="languageSelector" class="me-2"></div>
                <div class="d-flex align-items-center gap-2">
                    <!-- Theme Toggle -->
                    <button type="button" class="btn btn-outline-secondary" id="themeToggle" aria-label="Toggle Theme" data-i18n-title="toggle_theme_title" title="Toggle Theme">
                        <i class="bi bi-sun-fill" aria-hidden="true"></i>
                    </button>
                    
                    <!-- Switch Key Control -->
                    <div class="btn-group" role="group" aria-label="Switch Key Control">
                        <input type="text" class="form-control btn btn-outline-secondary text-center switch-key-input" id="switchKeyGlobal" 
                            value="Key_Control" aria-label="Switch Key Input">
                        <span class="btn btn-outline-secondary key-label" data-i18n="switch_key">Switch Key</span>
                    </div>
                    
                    <!-- File Operations -->
                    <div class="btn-group" role="group" aria-label="File Operations">
                        <button type="button" class="btn btn-outline-danger" id="clearAllNodes" data-i18n-title="clear_all_title" title="Clear All" aria-label="Clear All Nodes">
                            <i class="bi bi-trash3" aria-hidden="true"></i>
                        </button>
                        <label id="saveConfig" class="btn btn-outline-success" data-i18n-title="save_config_title" title="Save Configuration" role="button">
                            <i class="bi bi-save" aria-hidden="true"></i>
                            <span class="ms-1" data-i18n="save">Save</span>
                        </label>
                        <label class="btn btn-outline-secondary" data-i18n-title="load_config_title" title="Load Configuration" role="button">
                            <i class="bi bi-folder2-open" aria-hidden="true"></i>
                            <span class="ms-1" data-i18n="load">Load</span>
                            <input type="file" id="loadConfig" accept=".json" hidden>
                        </label>
                        <label class="btn btn-outline-secondary" data-i18n-title="upload_background_title" title="Upload Background Image" role="button">
                            <i class="bi bi-image" aria-hidden="true"></i>
                            <span class="ms-1" data-i18n="background">Background</span>
                            <input type="file" id="uploadBackground" accept="image/*" hidden>
                        </label>
                    </div>
                </div>
            </nav>

            <main class="row">
                <div class="col-md-9">
                    <div id="canvasContainer">
                        <div id="mappingCanvas" role="application" aria-label="Mapping Canvas"></div>
                        <div id="deleteZone" class="delete-zone" role="region" aria-label="Delete Zone">
                            <div class="delete-zone-content">
                                <i class="bi bi-trash-fill" aria-hidden="true"></i>
                                <span data-i18n="delete_zone">Drop here to delete</span>
                            </div>
                        </div>
                    </div>
                </div>
                <aside class="col-md-3">
                    <div class="right-section-container">
                        <!-- Types Section -->
                        <section class="card mb-2">
                            <header class="card-header">
                                <div class="d-flex align-items-center gap-2" role="button" data-bs-toggle="collapse" 
                                     data-bs-target="#availableMappings" aria-expanded="true" aria-controls="availableMappings">
                                    <span class="fw-medium" data-i18n="node_types">Types</span>
                                    <i class="bi bi-chevron-down" aria-hidden="true"></i>
                                </div>
                            </header>
                            <div id="availableMappings" class="collapse show">
                                <div class="card-body p-2">
                                    <div class="mapping-types-list">
                                        <div class="mapping-type-item" draggable="true" data-type="KMT_CLICK">
                                            <i class="bi bi-hand-index-fill me-2" aria-hidden="true"></i>
                                            <span data-i18n="type_click">Single Click</span>
                                        </div>
                                        <div class="mapping-type-item" draggable="true" data-type="KMT_CLICK_TWICE">
                                            <i class="bi bi-2-circle-fill me-2" aria-hidden="true"></i>
                                            <span data-i18n="type_double_click">Double Click</span>
                                        </div>
                                        <div class="mapping-type-item" draggable="true" data-type="KMT_CLICK_MULTI">
                                            <i class="bi bi-bezier2 me-2" aria-hidden="true"></i>
                                            <span data-i18n="type_multi_click">Multi Click</span>
                                        </div>
                                        <div class="mapping-type-item" draggable="true" data-type="KMT_DRAG">
                                            <i class="bi bi-arrow-down-up me-2" aria-hidden="true"></i>
                                            <span data-i18n="type_drag">Drag</span>
                                        </div>
                                        <div class="mapping-type-item" draggable="true" data-type="KMT_STEER_WHEEL">
                                            <i class="bi bi-dpad-fill me-2" aria-hidden="true"></i>
                                            <span data-i18n="type_steer_wheel">Steer Wheel</span>
                                        </div>
                                        <div class="mapping-type-item" draggable="true" data-type="KMT_MOUSE_MOVE">
                                            <i class="bi bi-mouse2-fill me-2" aria-hidden="true"></i>
                                            <span data-i18n="type_mouse_move">Mouse Move</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                        
                        <!-- Node List Section -->
                        <section class="card mb-2">
                            <header class="card-header d-flex align-items-center gap-2">
                                <div class="d-flex align-items-center gap-2" role="button" data-bs-toggle="collapse" 
                                     data-bs-target="#nodeListSection" aria-expanded="false" aria-controls="nodeListSection">
                                    <span class="fw-medium" data-i18n="node_list">Node List</span>
                                    <span class="badge rounded-pill bg-secondary" id="nodeCount">0</span>
                                    <i class="bi bi-chevron-down" aria-hidden="true"></i>
                                </div>
                                <div class="btn-group ms-auto" role="group" aria-label="Node Scale Controls">
                                    <button type="button" class="btn btn-sm btn-outline-secondary" id="decreaseScale" data-i18n-title="decrease_scale_title" title="Decrease Scale">
                                        <i class="bi bi-dash" aria-hidden="true"></i>
                                    </button>
                                    <input type="number" class="btn btn-sm btn-outline-secondary text-center no-spinners" id="nodeScale" 
                                           value="1.0" step="0.05" min="0.5" max="2.0" aria-label="Node Scale">
                                    <button type="button" class="btn btn-sm btn-outline-secondary" id="increaseScale" data-i18n-title="increase_scale_title" title="Increase Scale">
                                        <i class="bi bi-plus" aria-hidden="true"></i>
                                    </button>
                                </div>
                                <div class="btn-group" role="group" aria-label="Node Layer Controls">
                                    <button type="button" class="btn btn-sm btn-outline-secondary" id="moveNodeBack" data-i18n-title="move_back_title" title="Move Back" disabled>
                                        <i class="bi bi-arrow-down-square" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary" id="moveNodeFront" data-i18n-title="move_front_title" title="Move Front" disabled>
                                        <i class="bi bi-arrow-up-square" aria-hidden="true"></i>
                                    </button>
                                </div>
                            </header>
                            <div id="nodeListSection" class="collapse">
                                <div class="card-body p-2">
                                    <div id="nodeList" class="node-list" role="list">
                                        <!-- Nodes will be dynamically added here -->
                                    </div>
                                </div>
                            </div>
                        </section>

                        <!-- Properties Section -->
                        <section class="card mb-2">
                            <header class="card-header">
                                <div class="d-flex align-items-center gap-2" role="button" data-bs-toggle="collapse" 
                                     data-bs-target="#mappingPropertiesSection" aria-expanded="true" aria-controls="mappingPropertiesSection">
                                    <span class="fw-medium" data-i18n="properties">Properties</span>
                                    <i class="bi bi-chevron-down" aria-hidden="true"></i>
                                </div>
                            </header>
                            <div id="mappingPropertiesSection" class="collapse show">
                                <div class="card-body p-2">
                                    <form id="mappingForm">
                                        <div class="mb-3">
                                            <input type="text" class="form-control" id="mappingComment" 
                                                   data-i18n-placeholder="add_comment_placeholder" placeholder="Add a comment..." disabled aria-label="Mapping Comment">
                                        </div>
                                        <div class="mb-3">
                                            <div class="form-control" id="mappingTypeLabel" disabled></div>
                                        </div>
                                        <div class="mb-3" id="mappingKeyPropertiesContainer">
                                            <input type="text" class="form-control" id="mappingKeyProperties" 
                                                   data-i18n-placeholder="press_key_placeholder" placeholder="Press any key..." disabled aria-label="Mapping Key">
                                        </div>
                                        <div class="mb-3">
                                            <label for="opacityRange" class="form-label" data-i18n="opacity">Opacity</label>
                                            <input type="range" class="form-control" id="opacityRange" 
                                                   min="10" max="100" value="100" disabled>
                                            <div class="form-text" data-i18n="opacity_hint">Adjust the opacity of the selected element (0-100%)</div>
                                        </div>
                                        <div id="mappingPropertiesContent">
                                            <!-- Dynamic properties will be inserted here -->
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="switchMap" disabled>
                                            <label class="form-check-label" for="switchMap" data-i18n="switch_map">
                                                Switch Map
                                            </label>
                                        </div>
                                        <div class="d-flex gap-2 mt-3 mb-2">
                                            <button type="button" class="btn btn-danger" id="deleteMapping" data-i18n="delete_node" disabled>Delete Node</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </section>
                    </div>
                </aside>
            </main>
        </div>
        <footer class="footer">
            <div class="container text-center">
                <span data-i18n="made_with">Made with</span> <i class="bi bi-heart-fill text-danger" aria-hidden="true"></i> <span data-i18n="made_by">by</span> 
                <a href="https://github.com/w4po/ScrcpyKeyMapper" target="_blank" rel="noopener noreferrer" class="text-decoration-none">w4po</a>
            </div>
        </footer>
    </div>

    <script src="https://unpkg.com/konva@9.2.3/konva.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script type="module" src="js/app.js"></script>
</body>
</html>
